<template>
  <div class="container">
    <div class="header">
      <div class="back">
        <router-link to="/index/order">
          <el-button type="info"> 后退</el-button>
        </router-link>
      </div>
      <div class="jiesuan"> <el-button v-if="detailsData[0].totalorderTstStatus=='待支付'" type="primary" @click="pay">结算</el-button>
      <el-button v-else type="primary" >已付款</el-button>
      </div>
      <!-- <div class="jiesuan">结算</div> -->
    </div>
    <div class="box">
      <div class="left">
        <!-- 用户信息 -->
        <h3>基本信息</h3>
        <template>
          <el-table :data="detailsData" :stripe="false" style="width: 100%">
            <el-table-column prop="totalorderNumber" label="订单编号" width="140">
            </el-table-column>
            <el-table-column prop="totalorderAccountnumber" label="会员账号" width="140">
            </el-table-column>
            <el-table-column prop="totalorderTstStatus" label="支付方式"> </el-table-column>
            <el-table-column prop="totalorderIntegral" label="订单积分">
            </el-table-column>
          </el-table>
        </template>
        <!-- 会员信息 -->
        <h3>会员信息</h3>
        <template>
          <el-table :data="vipData" :stripe="false" style="width: 100%">
            <el-table-column prop="name" label="会员姓名" width="140">
            </el-table-column>
            <el-table-column prop="type" label="会员类型" width="140">
            </el-table-column>
            <el-table-column prop="num" label="会员卡号"> </el-table-column>
            <el-table-column prop="status" label="会员状态"> </el-table-column>
          </el-table>
        </template>
        <!-- 费用信息 -->
        <h3>费用信息</h3>
        <template>
          <el-table :data="detailsData" :stripe="false" style="width: 100%">
            <el-table-column prop="totalorderPrice" label="消费合计" width="140">
            </el-table-column>
            <el-table-column prop="sale" label="优惠券" width="140">
            </el-table-column>
            <el-table-column prop="integralSale" label="积分抵扣">
            </el-table-column>
            <el-table-column prop="action" label="活动优惠"> </el-table-column>
          </el-table>
        </template>
        <template>
          <el-table :data="priceData" :stripe="false" style="width: 100%">
            <el-table-column prop="total" label="抵扣金额" width="140">
            </el-table-column>
            <el-table-column prop="sale" label="抹零" width="140">
            </el-table-column>
            <el-table-column prop="integralSale" label="订单总金额">
            </el-table-column>
            <el-table-column prop="action" label="应付款"> </el-table-column>
          </el-table>
        </template>
      </div>
      <div class="right">
        <h3>操作信息</h3>
        <template>
          <el-table :data="detailsData" :stripe="false" style="width: 100%">
            <el-table-column prop="totalorderCustomer" label="操作者"> </el-table-column>
            <el-table-column prop="totalorderStarttime" label="操作时间" width="180">
            </el-table-column>
            <el-table-column prop="totalorderState" label="订单状态"> </el-table-column>
            <el-table-column prop="totalorderTstStatus" label="付款状态"> </el-table-column>
            <el-table-column prop="remark" label="备注"> </el-table-column>
          </el-table>
        </template>
        <h3>消费信息</h3>
        <template>
          <el-table :data="detailsData[0].nfuhOrderList" :stripe="false" style="width: 100%">
            <el-table-column prop="orderServicetype" label="消费项目"> </el-table-column>
            <el-table-column prop="orderTechnician" label="技师" >
            </el-table-column>
            <el-table-column prop="orderPrice" label="价格"> </el-table-column>
            <el-table-column prop="orderNumber" label="数量"> </el-table-column>
            <el-table-column prop="orderPrice" label="小计"> </el-table-column>
          </el-table>
        </template>
      </div>
    </div>
  </div>
</template>


<script>
// import apis from "../../http/apis";
import {createNamespacedHelpers} from 'vuex';
 const {mapState }= createNamespacedHelpers("order")
export default {
  data() {
    return {
      basicData: [
        {
          date: "OD1233",
          phone: "1399999999",
          pay: "未支付",
          integral: "200",
        },
      ],
      vipData: [
        {
          name: "张利",
          type: "黄金会员",
          num: "NO.123",
          status: "有效",
        },
      ],
      priceData: [
        {
          total: "$200",
          sale: "-$0.00",
          integralSale: "-$0.00",
          action: "-$10",
        },
      ],
      handleData: [
        {
          name: "李玲",
          time: "2021-5-20 13:00:00",
          status: "未支付",
          remark: "",
        },
      ],
      consumptionData:[{
        name:'足道',
        technician:'花花',
        price:'$100',
        num:'1',
        subtotal: '$100'
      },{
        name:'保健',
        technician:'小甜甜',
        price:'$100',
        num:'2',
        subtotal: '$200'
      }],
      id:"",
      newDD:[]

    };
  },
  // mounted(){
  //   this.getOrderByid()
  // },
  // methods:{
  //   async getOrderByid(){
  //     // console.log(apis);
  //     const data = await apis.order.getOrderById(this.id)
  //     console.log('个人数据',data)
          
  //   }
  // }
   
  
   mounted(){
  // this.getOrderById()
  
  },
  computed:{
    ...mapState(['detailsData']),

  },
  
  methods:{
    pay(){
      this.$router.push('jiesuan')
    }
   
    
  }
};
</script>

<style scoped lang="scss">
* {
  padding: 0;
  margin: 0;
}
.container {
  background-color: rgb(239, 242, 246);
  width: 1024px;
  height: 700px;
  margin: 0 auto;
}
.header {
  width: 1000px;
  height: 50px;
  background-color: white;
  margin: 0 auto;
  border-radius: 5px;
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
  .back {
    color: #2889ff;
    line-height: 50px;
    font-size: 22px;
    margin-left: 5px;
    margin-top: -5px;
  }
  .jiesuan {
    margin-right: 5px;
    margin-top: 5px;
  }
}
.box {
  width: 1000px;
  height: 550px;
  // background: white;
  margin: 0 auto;
  margin-top: 5px;
  border-radius: 5px;
  display: flex;
  justify-content: space-between;
  .left {
    padding-top: 25px;
    padding-left: 15px;
    padding-right: 15px;
    // margin-left: 5px;
    background: white;
    border-radius: 5px;
    .el-table {
      margin-bottom: 20px;
    }
  }
  .right {
    padding-top: 25px;
    padding-left: 20px;
    margin-left: 5px;
    background: white;
    border-radius: 5px;
  }
}
</style>